<template>
  <div ref="nav" class="nav container-full">
    <div
      style="height: 100%"
      class="container-fluid container-xl d-flex align-items-center justify-content-between">
      <h1 @click="refresh">promi<strong class="text-danger ms-2">.</strong></h1>

      <nav id="navbar" class="navbar navbar-expand-lg">
        <i
          class="navbar-toggler bi bi-list menuList"
          @click="switchMenu('0')"></i>
        <div class="collapse navbar-collapse" ref="navbarNav" id="navbarNav">
          <i
            class="navbar-toggler bi bi-x menuClose"
            @click="switchMenu('100%')"></i>
          <ul class="navbar-nav">
            <template v-for="it in menuItem" :key="it.name">
              <li class="nav-item">
                <a
                  @click="switchActiveMenu(it.name)"
                  :class="{
                    'nav-link': true,
                    'text-light': true,
                    active: it.isActive,
                  }"
                  :href="it.link"
                  >{{ it.name }}</a
                >
              </li>
            </template>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import mittBus from '../utils/mittBus'
import { useDebounceFn } from '@vueuse/core'

const menuItem = ref([
  { isActive: true, name: '首页', link: '#home' },
  { isActive: false, name: '关于我们', link: '#about' },
  { isActive: false, name: '服务', link: '#services' },
  { isActive: false, name: '项目', link: '#portfolio' },
  { isActive: false, name: '提问', link: '#question' },
])

const refresh = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

// nav
const nav = ref<HTMLDivElement>()
// 导航栏
const navbarNav = ref<HTMLDivElement>()

// 开关
const switchMenu = (type: '0' | '100%') => {
  if (navbarNav.value) {
    navbarNav.value.style.left = type
    navbarNav.value.setAttribute(
      'class',
      type == '0'
        ? 'collapse navbar-collapse beforeSwitch'
        : 'collapse navbar-collapse'
    )
  }
}
// 选中状态
const switchActiveMenu = (name: string) => {
  menuItem.value.forEach((it) => {
    it.isActive = false
    if (it.name == name) {
      it.isActive = true
    }
  })
}
// 事件总线
mittBus.on('switchActiveMenu', (name) => {
  switchActiveMenu(name as string)
})

// 屏幕大小改变需要重新刷新图标
const scroll = () => {
  if (nav.value) {
    // 固定导航栏
    if (nav.value.offsetTop - window.scrollY <= 20) {
      nav.value.classList.add('sticked')
    } else {
      nav.value.classList.remove('sticked')
    }
  }
}
// 防抖
const debouncedResize = useDebounceFn(scroll, 100, { maxWait: 800 })

// 监听
onMounted(() => {
  window.addEventListener('scroll', scroll)
})
</script>

<style lang="scss" scoped>
.nav {
  background-color: var(--main-color);
  color: #fff;
  height: 90px;
  transition: all 0.5s;
  z-index: 99999;
  top: 0;
  position: sticky;
  height: 70px;
  .menuList {
    font-size: 36px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    border: 0 !important;
  }
  .nav-link {
    /* font-family: var(--font-secondary); */
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    position: relative;
    padding: 0;
    margin-left: 30px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6) !important;
  }
  .nav-link {
    color: #fff !important;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: -6px;
      width: 0%;
      height: 2px;
      background-color: red;
      visibility: hidden;
      transition: all 0.3s ease-in-out 0s;
    }
  }
  .active,
  .nav-link:hover {
    color: #fff !important;
    &::before {
      width: 100%;
      visibility: visible;
    }
  }
}
.sticked {
  box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 990px) {
  .beforeSwitch {
    &:before {
      content: '';
      position: fixed;
      inset: 0;
      background-color: var(--main-color);
      opacity: 0.9;
      z-index: 999;
      transition: 0.3s;
    }
  }
  #navbarNav {
    display: block;
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    overflow-y: auto;
    bottom: 0;
    transition: 0.3s;
    z-index: 9997;
    .menuClose {
      position: absolute;
      right: 0;
      top: 10px;
      z-index: 99991;
      border: 0;
      color: #fff;
      font-size: 36px;
      cursor: pointer;
    }
    ul {
      position: absolute;
      right: 0;
      padding: 50px 0 10px 0;
      margin: 0;
      background: var(--main-color);
      overflow-y: auto;
      transition: 0.3s;
      z-index: 9999;
      width: 45%;
      height: 100%;
      li {
        margin: 20px auto;
        a {
          margin: 0;
        }
      }
    }
  }
}
</style>
